<template>
  <div
    class="personExcel"
    style="border: none;border-left: 2px solid #409eff;;border-top-left-radius: 50%;"
  >
    <div class="world">②&nbsp;总表excel上传</div>
    <div class="uploadBlock" style="margin-top: 100px;" @click="openWindowUpload">
      <i v-show="uploadShow" class="el-icon-upload"></i>
      <div class="uploaded" v-show="!uploadShow">
        <img class="uploadedImg" src="@/assets/xlsx1.png" />
        <span>{{ excelName }}</span>
      </div>
      <input type="file" id="file-alluploader" accept=".xlsx" @change="getAllExcel" multiple />
    </div>
    <el-button
      icon="el-icon-download"
      type="primary"
      size="medium"
      class="btn"
      @click="createExcel"
    >生成</el-button>
    <el-dialog title="更新excel成功" :visible.sync="dialogVisible" width="75%" @close="resetValue">
      <div style="height:369px;overflow-x:hidden !important;">
        <el-scrollbar style="overflow-x:hidden !important;height:100%;width:100%;">
          <p v-for="item in addList" :key="item">
            <span class="spanworld">
              <i class="el-icon-circle-plus-outline" style="color:#67c23a;margin-right:5px;"></i>
              <i class="el-icon-document" style="color:#409EFF;margin-right:5px;"></i>
              序号:{{ personAll[item][1] }}&nbsp;&nbsp;
              代理人:{{ name }}&nbsp;&nbsp;
              客户名称:{{ personAll[item][4] }}&nbsp;&nbsp;
              专利名称:{{ personAll[item][6] }}
            </span>
          </p>
          <p v-for="element in editList" :key="element">
            <span class="spanworld">
              <i class="el-icon-edit" style="color:#e6a23c;margin-right:5px;"></i>
              <i class="el-icon-document" style="color:#409EFF;margin-right:5px;"></i>
              序号:{{ personAll[element][1] }}&nbsp;&nbsp;
              代理人:{{ name }}&nbsp;&nbsp;
              客户名称:{{ personAll[element][4] }}&nbsp;&nbsp;
              专利名称:{{ personAll[element][6] }}
            </span>
          </p>
        </el-scrollbar>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const { ipcRenderer } = window.require("electron");
export default {
  components: {},
  props: {
    personFiles: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      personAll: [],
      name: "",
      uploadShow: true,
      allData: {},
      excelName: "",
      dialogVisible: false,
      addList: [],
      editList: [],
    };
  },
  mounted() {
    ipcRenderer.on("uploadFiles", (event, file) => {
      console.log(file);
      this.personAll = file.allArr;
      this.name = file.personArr[0].person;
    });
    ipcRenderer.on("getExcelList", (event, file) => {
      console.log(file);
      this.allData = file;
    });
    ipcRenderer.on("uploadSuccess", (event, objz) => {
      this.addList = objz.addList;
      this.editList = objz.editList;
      this.dialogVisible = true;
    });
  },
  methods: {
    createExcel() {
      if (Object.keys(this.allData).length > 0) {
        ipcRenderer.send("createExcel", this.allData);
      } else {
        this.$message({
          type: "error",
          message: "表格正在处理，稍等",
          offset: 60,
        });
      }
    },
    resetValue() {
      this.uploadShow = true
      // this.$emit('resetValue')
    },
    getAllExcel(e) {
      this.ipcSendFiles(e.target.files);
      document.getElementById("file-alluploader").value = "";
    },

    // 通信main进程
    ipcSendFiles(files) {
      let sendFiles = [];
      Array.from(files).forEach((item) => {
        let obj = {
          name: item.name,
          path: item.path,
        };
        sendFiles.push(obj);
      });
      console.log(sendFiles);
      this.checkExcel(sendFiles);
    },

    // 校验格式
    checkExcel(files) {
      const path = files[0].path;
      if (path.indexOf(".xlsx") === -1) {
        this.$message({
          type: "error",
          message: "请选择xlsx格式的excel文件",
          offset: 60,
        });
      } else {
        var obj = {
          personAll: this.personAll,
          name: this.name,
          files: files,
        };
        this.excelName = files[0].path;
        this.uploadShow = false;
        ipcRenderer.send("uploadAllExcel", obj);
      }
    },

    // 呼起上传
    openWindowUpload() {
      console.log(this.personFiles);
      // 校验是否上传了子表
      if (this.personFiles.length > 0) {
        document.getElementById("file-alluploader").click();
      } else {
        this.$message({
          type: "error",
          message: "请先上传代理人excel",
          offset: 60,
        });
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
#file-alluploader {
  visibility: hidden;
  width: 0;
  height: 0;
}

.btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>
<style lang="stylus">
.el-dialog {
  background: #282c34;
}

.el-dialog__title {
  color: #fff;
}

.el-dialog__body {
  padding: 0px 20px !important;

  p {
    font-size: 13px;
  }
}

.spanworld {
  width: 700px;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  color: #d6d1d1;
}
.el-scrollbar__wrap{
  overflow-x: hidden;
}
</style>
